<template>
    <div id="myChart1" :style="{ width: '800px', height: '500px' }"></div>
</template>

<script>
export default {
    name: "Pc2FbEcharts3",

    data() {
        return {
            datas: [
                [
                    { name: '线下', value: 28.34 },
                    { name: '线上（微信）', value: 71.66 },
                ]
            ]
        };
    },

    mounted() {
        this.drawLine();
    },

    methods: {
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("myChart1"));
            // 绘制图表
            myChart.setOption({
                series: this.datas.map((data, idx) => {

                    var top = idx * 33.3;
                    return {
                        type: 'pie',
                        radius: [120, 60],
                        top: top + '%',
                        height: '80.3%',
                        left: 'center',
                        width: 600,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            alignTo: 'edge',
                            formatter: '{name|{b}}\n{time|{c} %}',
                            minMargin: 5,
                            edgeDistance: 10,
                            lineHeight: 15,
                            rich: {
                                time: {
                                    fontSize: 10,
                                    color: '#999'
                                }
                            }
                        },
                        labelLine: {
                            length: 15,
                            length2: 0,
                            maxSurfaceAngle: 80
                        },
                        labelLayout: function (params) {
                            const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                            const points = params.labelLinePoints;
                            // Update the end point.
                            points[2][0] = isLeft
                                ? params.labelRect.x
                                : params.labelRect.x + params.labelRect.width;
                            return {
                                labelLinePoints: points
                            };
                        },
                        data: data
                    };
                })
            });
        },
    },
};
</script>
